<template lang="html">
  <div class="server">
    <banner :imgUrl="imgUrl"></banner>
    <div class="server-container">
      <div class="top">
        <div class="top-bottom-same">
          <span>服务内容</span>
          <img src="./images/line_one.png"/>
        </div>
          <ul>
            <li>受业主大会组织方委托，以第三方公平，公正，专业的身份，</li>
            <li>提供业主大会《业主大会表决票》的发放，回收，开箱，唱票，计票，监票的服务</li>
            <li>以及对小区物业服务质量监理，小区服务设施设备的查验</li>
          </ul>
        <div class="beauty-bg"></div>
      </div>
      <div class="center">
          <div class="center-title">
            <span>服务项目</span>
          </div>
          <div class="content_listone">
            <div>业主大会召开的举办</div>
            <div>业主委员会顾问</div>
            <div>物业招标顾问</div>
          </div>
          <div class="content_listtwo">
            <div>小区物业服务质量监理</div>
            <div>小区设施设备的查验</div>
          </div>
      </div>
      <div class="bottom">
          <div class="bottom-titile">
              <span>服务依据</span>
              <img src="./images/line_two.png"/>
          </div>
          <ul>
            <li>根据国家《物权法》，国家、省、市、《物业管理条例》</li>
            <li>《物业服务合同》《小区管理规约》，《物业服务管理方案》</li>
            <li>以及约定服务 (标准) ，物业费价格</li>
            <li>专业技术规范和法律法规等其他相关规定进行物业服务质量跟踪监测</li>
          </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from 'components/index/banner/banner'
export default {
  components: {
    Banner
  },
  data() {
    return {
      imgUrl: require('./images/small_banenr.png')
    }
  }
}
</script>


<style lang="scss">
  .server{
    width:100%;
    .server-container{
      margin-top: -60px;
      width: 100%;
      .top{
        width: 100%;
        height: 500px;
        background: url('./images/server_bg.png') no-repeat;
        background-position: center;
        background-size: 100vm 500px;
        align-items: center;
        text-align: center;
        .top-bottom-same{
          text-align: center;
          padding-top: 80px;
          padding-bottom: 50px;
          span{
            font-size: 40px;
            color: #fff;
            font-family: '微软雅黑';
            font-weight: lighter;
            display: block;
          }
          img{
            width: 180px;
            height: 10px;
            margin-top: 10px;
          }
        }
          ul{
            line-height: 30px;
            text-align: center;
            font-family: 微软雅黑;
            font-weight: lighter;
            li{
              color: #fff;
              font-size: 18px;
              line-height: 46px;
            }
          }

      }
      .center{
        background: #fff;
        .center-title{
          text-align: center;
          padding-top: 170px;
          padding-bottom: 80px;
          span{
            font-size: 40px;
            font-family: '微软雅黑';
            font-weight: lighter;
            padding-top: 0;
            padding-left: 290px;
            padding-right: 300px;
            background: url("./images/server_project.png") no-repeat;

          }
        }
        .content_listone{
          width: 100%;
          height: 150px;
        }
        .content_listone div{
          width: 370px;
          height: 150px;
          border: 1px solid #d9d9d9;
          border-radius: 10px;
          text-align: center;
          line-height: 150px;
          float: left;
          margin-left: 10%;
          color: #276cb3;
          font-size: 24px;
          font-family: 微软雅黑;
          font-weight: lighter;
        }
        .content_listtwo{
          width: 100%;
          height: 150px;
          margin-top: 30px;
        }
        .content_listtwo div{
          width: 370px;
          height: 150px;
          border: 1px solid #d9d9d9;
          border-radius: 10px;
          text-align: center;
          line-height: 150px;
          float: left;
          margin-left: 10%;
          color: #276cb3;
          font-size: 24px;
          font-family: 微软雅黑;
          font-weight: lighter;
        }
      }
      .bottom{
        background: url('./images/basis_bg.png') no-repeat 100%;
        height: 700px;
        margin-top: 100px;
        margin-bottom: 5px;
        .bottom-titile{
          text-align: center;
          padding-top: 160px;
          padding-bottom: 100px;
          span{
            color: #000;
            font-size: 40px;
            font-family: 微软雅黑;
            font-weight: lighter;
            display: block;
          }
          img{
            width: 180px;
            height: 10px;
            margin-top: 10px;
          }
        }
        ul{
          line-height: 40px;
          text-align: center;
          li{
            color: #000;
            font-size: 18px;
            font-family: 微软雅黑;
            font-weight: lighter;
          }
        }
      }
    }
  }
</style>
